<template>
  <div>
	  <myheader></myheader>

	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				<Breadcrumb :datas="datas"></Breadcrumb>
			</div>
			<div>
				<Avatar :src="src" :width='150' fit="fill" ></Avatar>
			</div>

			<div>
				<table>
				<tr>
					<td>
						用户头像：
					</td>
					<td>
						<input type="file" @change="upload" >
					</td>
				</tr>
				</table>
			</div>	


		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>
//导入组件
import myheader from './myheader.vue'




export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //面包屑导航
	  src:'',
	  datas:[{title:'首页',route:{name:'index'}},{title:'用户中心--->我的首页'}],
	  
	  
    }
  },
  //注册组件标签
  components:{
	  myheader,
	
  },
  mounted:function(){

   
  
},
  methods:{
	  upload:function(e){
		  //获取文件
		  let file = e.target.files[0];
		  //声明参数
		  let param = new FormData();

		  param.append('file',file,file.name)

		  //声明请求头
		  let config = {headers:{'Content-Type':'multipart/form-data'}}

		  //请求后台接口
		  this.axios.post('http://localhost:8000/upload/',param,config).then((
			result)=>{
				console.log(result);

				//展示图片
				this.src = "http://localhost:8000/static/upload/"+result.data.filename
			})



	  }
	  

     
  }
}


</script>
 
<style>
/* 样式 */
td {
	padding:10px;
}


</style>